<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link href="css/base.css" rel="stylesheet">
<link href="css/detail.css" rel="stylesheet" />
<style type="text/css">
.prevent-Choose{
	color:#ccc;
}
</style>
<title>商品详情</title>
</head>
<body>
    <div style="padding: 0px 0px 55px; display: block;" class="by_w" id="by_w" >
        <!--抬头-->
        <div class="m_pagetop hidiv" align="center">
            <span class="m_goback" onclick="document.location.href = 'javascript:history.go(-1)';"></span>
            <span class="m_title escp" id="modelName">商品详情
            </span>
        </div>
        <div style="min-height: 490px;margin-bottom:0px" class="m_wap hidiv" id="min_hdiv" >
            <!--衣服旋转-->
            <div class="m_sjbg relative" align="center">
                <div class="m_sjbg_con ofh none">
                </div>
            </div>
            <div style="position: relative;" class="edit_w relative">
                <div class="m_p" id="m_p">
                    <div style="position: relative; width: 100%; height: 100%; overflow: hidden;" class="slidermain" id="slidermain">
                        <img src="http://www.hnhcyy.com/resource/img/${spItem.spid}/0.jpg" style="width:100%">
                    </div>
                </div>
            </div>

            <div class="p_ddl_p">
                <!--7天无忧退换部分-->
                <div class="m_p_jg">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tbody>
                            <tr>
                                <td style="text-align:left">
                                    <span style="font-size:16px;color:#B768A5">
                                     	    ￥${spItem.price}
                                    </span>
								<c:if test="${spItem.priceYj!=0}">
                                    <span style="text-decoration:line-through;color:#808080;font-size:12px">
                                        	￥${spItem.priceYj}
                                    </span>
                                </c:if>
                                <br/>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!--选择规格部分-->
                <a class="m_dl_xqpjsj" id="p_cm">选择规格<span class="ckcm"></span></a>
                <!-- <a class="m_dl_xqpjsj" id="p_dzb">尺码对照表<span class="ckcm"></span></a>
                <a class="m_dl_xqpjsj" id="p_comment" href="/Comment/Index?spid=${product.productId}">
                    商品评价(<span id="totalComm">0</span>)<span class="pjscs">5.0 分</span>
                </a> -->
                <div class="m_p_sj bbox">
                    <table class="b_b_dc bg_rt" id="m_sjxx">
                        <tbody>
                            <tr>
                                <td align="left" width="60px">
                                    <a href="Shop/StoreInfo"><img src="images/store.png" class="sjpic" id="sjpic" height="50px" width="50px"></a>
                                </td>
                                <td align="left">
                                    <span class="escp p_sjname" id="supplierName">湖南恒昌医药有限公司</span>
                                    <span id="supplierPhone">400-662-4000</span>
                                </td>
                                <td class="callicon">
                                    <span style="display: inline-block;" class="phone_icon2 icon-phone"></span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="p_sjpf" align="left">
                        <div class="p_pfn" align="center"><span class="col_f60" id="serviceGrade">4.9</span><br>物流服务</div>
                        <div class="p_pfn" align="center"><span class="col_f60" id="qualityGrade">4.9</span><br>商家服务</div>
                        <div class="p_pfn" align="center"><span class="col_f60" id="productGrade">4.9</span><br>实物相符</div>
                    </div>
                </div>
            </div>

            <!--图文详情-->
            <div class="morets none">
            </div>
            <div class="m_p_spxq bbox" id="pdetial">
               
                <!--底部加入购物车和立即购买-->
                <div class="sub_btn bbox hidiv" align="center">
                    <div class="cart_cc">
                        <span class="cart_i"></span>
                        <span class="cart_i_p none_im">0</span>
                    </div>
                    <input class="m_dl_buynow" id="goshop" value="立即购买" type="button">
                    <input class="m_dl_addcar m_dl_addcar2" id="addcart" value="加入购物车" type="button">
                </div>
            </div>
            <!--选择尺码弹出窗-->
            <div class="cmmy_bg none" id="cmmy" title="选择规格">
                <div class="fx_dl bbox">
                    <div class="tc_p_d">
                        <img src="http://www.hnhcyy.com/resource/img/${spItem.spid}/10.jpg" class="p_slt f_l">
                        <div>
                            <div style="color: #b768a5;font-size: 18px;">￥<label id="tc_price">${spItem.price}</label></div>
                        </div>
                        <div style="clear:both;"></div>
                        <span class="cmclose icon-circle_close" style="margin: -70px -10px 0 0;"></span>
                    </div>
                    <div id="cmss" style="padding: 0 12px 0 12px;">
                        <c:forEach items="${attrtypeList}" var="attrtype">
                            <ul class="cm2" id="sizesList">
                            <div class="cm1">${attrtype.attrTypeName}</div>
                            <div class="cm4" style="word-break: break-all;margin-top:7px;margin-bottom:2px;font-size: 12px;color: #999;" align="left">
                            </div>
 		                        <c:forEach varStatus="i" begin="0" end="${attrtype.attrValueList.size()-1}">
                                   <li class="m_dl_cm bbox" attrid="${attrtype.attrValueList.get(i.index).attrValueId}">${attrtype.attrValueList.get(i.index).attrValue}</li>
                                </c:forEach>
                            </ul>
                        </c:forEach>
                    </div>
                    <div class="cm3">
                        <table>
                            <tbody>
                                <tr>
                                    <td class="f14" align="left">购买数量</td>
                                    <td class="relative" align="left">
                                        <div class="m_ps bbox icon-add" id="add_num"></div>
                                        <input class="m_pnum bbox" id="nums" maxlength="4"  value="1" type="text">
                                        <div class="m_pp bbox icon-reduce" id="des_num"></div>
                                    </td>
                                    <td>库存数量</td><td class="kucun">${spItem.sumbal}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="cm_b_c">
                        <div class="cart_cc">
                            <span class="cart_i"></span>
                            <span class="cart_i_p none_im">0</span>
                        </div>
                        <input class="m_dl_addcar cmcar" value="确定" id="confirm" type="button">
                    </div>
                </div>
            </div>

            <!--尺码对照表弹出-->
            <!-- <div class="cmmy_bg none" id="cmdzb" title="尺码对照表">
                    <img style="margin-top: -160px;" onerror="javascript:this.src='https://static.biyao.com/m/img/base/nullpic.png'"
                         src="/images/d616bf5d681d03af.jpg"
                         class="cmdzb_img">
                </div> -->
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-html5Validate.js"></script>            
<script type="text/javascript">
	    var minnum = 1;
        function checkInput(target){
	     	var reg=/^\d+$/;
			if(!reg.test(target.val())||target.val()==0){
				target.val(minnum);      		
			}
    	}
    	$(".m_pnum").blur(function(){
    		checkInput($(this));
    	})
    	
        $("#p_cm").bind("click",
          function () {
              $("#cmmy").removeClass("none"),
              $("#cmmy")[0].addEventListener("touchmove",
              function (e) {
                  e.preventDefault()
              })
          });

        $("#p_dzb").bind("click", function () {
            $("#cmdzb").removeClass("none");

        })
        $("#cmdzb").bind("click", function () {
            $("#cmdzb").addClass("none");
        })

        $(".rotate").bind("click",
          function () {
              $(".slidermain").ourRotaClick({
                  touchbacks: function (e) {
                      $("#maskspan,.mask_pro").css("background-image", "url(" + window.ControllerSite + "https://static.biyao.com/m/img/base/trans.png)"),
                      $("#maskspan").attr("imgindex", e),
                      $(".img_pro").css("background-image", "url(" + $($("#slideContent>li")[e - 1]).children(".lb").attr("imguri") + ")")
                  }
              })
          })


        $(".cmclose").bind("click",
          function () {
              $(".cmmy_bg").addClass("none"),
              buyNowFlag = !1
          })


        //加减
        $(document).on('click','#add_num',function(){
            var t = $("#nums");
            t.val(parseInt(t.val()) + minnum)
        });

        $("#des_num").bind("click",function() {
              var t = $("#nums");
              t.val(Math.max(parseInt(t.val()) - minnum,minnum))
        }) 

        $("#nums").change(function() {
            var t = $("#nums");
            var tt = t.val();
            if (tt % minnum != 0) {
                var tmp = tt - tt % minnum + minnum;
                t.val(tmp);
            }
        })

        var spid = '${spItem.spid}';
        $(".cm2 li").click(function () {
        	$this=$(this);
        	if($this.hasClass("prevent-Choose"))return;
        	$this.addClass("cm_checked").siblings().removeClass("cm_checked");
            if($this.hasClass("cm_checked")){
            	var attrid=$this.attr("attrid");
            	var sib=$this.parent().prev();
				sib.each(function(){
					$(this).children(".cm2 li").each(function(){
						if($(this).hasClass("cm_checked")){
							attrid=attrid+","+$(this).attr("attrid");
							return false;
						}
					})
				})
        		$.ajax({
        			url: 'NonDrug/MatchAttr',
        			data: {attrid:attrid, spid:spid},
        			type: 'get',
        			success: function (data) {
        				var arr=new Array();
        				$.each(data,function(k,v){
        					arr.push(v);
        				})
        				if(attrid.indexOf(",")>0){//两个属性被选中
        					var tag=false;
        					var sib=$this.parent().siblings(".cm2");
	       					sib.each(function(){
	        					$(this).children("#sizesList li").each(function(){
	        						if($(this).hasClass("cm_checked")){
	        							tag=true;
	        							return false;
	        						}
	        					})
	        					if(!tag){
	        						var attrid=$(this).children("#sizesList li").attr("attrid");
	        						choose($(this).children("#sizesList li"),arr);
	        					}
	       					}) 
        				}else{//一个属性被选中
	       					var sib=$this.parent().siblings(".cm2");
	       					sib.each(function(){
	       						choose($(this).children("#sizesList li"),arr);
	       					}) 
        				}
        			}
        		})
        	} 
        }); 
		function choose(element,arr){	//element 是否在集合arr中
			element.each(function(){
				var attrid=$(this).attr("attrid");
				if(($.inArray(attrid, arr))==-1){
					$(this).addClass("prevent-Choose").removeClass("cm_checked");
				}else{
					$(this).removeClass("prevent-Choose");
				}
			}) 
		}
		
        var cartNum=0;
        $("#confirm").click(function () {//确定，加入购物车
       		if($(".cm_checked").length<$(".cm2").length){
       			alert("请选择规格！");
       			return false;
       		}
            
            var attr = new Array();
            $(".cm2 li").each(function () {
                if ($(this).hasClass("cm_checked"))
                {
                    attr.push($(this).attr("attrid"));
                }

            })
            var array = attr.join(",");
		    var ordernum = $("#nums").val();
            var userid = shop.getLocalStorage("userid");
            //验证库存
            /* $.post("Cart/validateStock",{array:array,spid:spid,ordernum:ordernum},function(data){
            	if(data!=''){
            		$(".cm_checked").testRemind(data);
            	}else{ */
		            $.ajax({
		                url: 'Cart/AddCart',
		                data: { attrArray:array,spid: spid, userId: userid, orderNum: ordernum },
		                type: 'post',
		                success: function (data) {
		                        //alert(data);
			                    $(".cart_i").testRemind(data);
		                        if(data=="成功加入购物车！"){
			                        if ($("#nums").val() >= 1)
			                        {
			                            var e = $("#nums").val();
			                            cartNum =cartNum + parseInt(e);
			                            $(".cart_cc .cart_i_p").text(cartNum);
			                            $(".cart_cc .cart_i_p").removeClass("none_im");
			                            $(".cmmy_bg").addClass("none");
			                        }
		                        }
                		}
            		});
            	//}
            //})
        });

        $("#addcart").click(function () {
            $("#cmmy").removeClass("none");
        });

        $("#goshop").click(function () {
            if($(".cart_cc .cart_i_p").text()!=0){
            	$(".cart_cc").trigger("click");
            }else{
             	$("#cmmy").removeClass("none");
            }
        });
        $(".cart_cc").click(function () {
        	window.location.href="Shop/Cart/Index";
        });
    
</script>
</body>
</html>